<template>
  <div>
    <p>{{msg}}</p>
    <p>{{msgData}}</p>
    <p>{{propData}}</p>
    <li v-for="item in list" :key="item">{{item}}</li>
    <button @click="handleClick">click me</button>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Prop, Vue } from 'vue-property-decorator';

@Component({
  name: 'my-comp'
})
export default class MyComp extends Vue {
  msg: string = 'this is comp.';
  list: Number[] = [1, 2, 3, 4];
  @Prop()
  propMsg:String;
  @Prop()
  propData: String;

  get msgData() {
    return 'propMsg is: ' + this.propMsg;
  }

  handleClick(): void {
    this.list.push(this.list.length + 1);
  }

  @Watch('list')
  function(newVal: Number[]) {
    console.log(newVal);
  }

  mounted(): void {
    console.log('my-comp mounted');
  }
}
</script>
